<template>
	<view>
		<div class='nav'>
			<ul v-show="show === 2">
				<li :class="tabs === 1 ? 'li-active' : '' " @click='tabs1'>全部</li>
				<li :class="tabs === 2 ? 'li-active' : '' " @click='tabs2'>已签收</li>
				<li :class="tabs === 3 ? 'li-active' : '' " @click='tabs3'>订单评价</li>
				<li :class="tabs === 4 ? 'li-active' : '' " @click='tabs4'>申请售后</li>
			</ul>
		</div>
		<div class='order-demo' v-for="item in orderList" :key="item.id">
			<div class='order-top'>
				<div class='order-top-left'>
					<u-icon name="coupon"></u-icon>
					<span>{{item.seller || item.buyer}}</span>
					<u-icon name="arrow-right"></u-icon>
				</div>
				<span class='order-top-right'>{{tips}}</span>
			</div>
			<div class='order-content'>
				<!-- <u--image :showLoading="true" :src="item.img" width="100px" height="100px" radius='10'></u--image> -->
				<img :src="item.img" alt="" class='order-img' @click='toDetail'>
				<div class='order-content-right'>
					<p>
						<span class='goods'>{{item.goods}}</span>
						<span>￥{{item.price}}</span>
					</p>
					<div class='sure'>
						<div class='mr30' v-show="tabs == 4">
							<u-button  color='#2ED8C4' shape="circle" text="联系客服" :plain='true' size='mini'></u-button>
						</div>
						<u-button color='#2ED8C4' shape="circle" :text="btntext" :plain='true' size='mini'></u-button>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tabs:1,
				orderList:[],
				show:null,
				value:null,
				btntext:'确认收货',
				tips:"未交易"
			}
		},
		onLoad(option) {
			// console.log(option)
			this.show = Number(option.show)
			this.value =Number(option.v)
			// console.log(this.value)
		},
		mounted() {	
			// 我卖的进if
			if(this.show == 1){
				this.$api.DLQgetMygoods().then((res)=>{
					// console.log(res)
					this.orderList = res.data
					this.btntext = '未卖出'
				})
			//我买的则进else 
			}else{
				this.$api.DLQgetOrders().then((res)=>{
					// console.log(res)
					// this.orderList = res.data
					if(this.value == 1){
						this.orderList = res.data.filter((item)=>item.accomplish == 1)
					}else if(this.value == 2){
						this.tabs = 2
						this.btntext = '已签收'
						this.tips = '交易完成'
						this.orderList = res.data.filter((item)=>item.accomplish == 0)
					}else if(this.value == 3){
						this.tabs = 4
						this.btntext = '查看详情'
						this.tips = '已交易/未交易'
						this.orderList = res.data.filter((item)=>item.undiscuss == 0)
					}
				})
			}
		},
		methods:{
			toDetail(){
				uni.navigateTo({
					url:'/pages/Square/pages/Thxiangqing'
				})
			},
			tabs1(){
				this.tabs = 1
				this.btntext = '确认收货'
				this.tips = '未交易'
				this.$api.DLQgetOrders().then((res)=>{
					this.orderList = res.data.filter((item)=>item.accomplish == 1)
				})
			},
			tabs2(){
				this.tabs = 2
				this.btntext = '已签收'
				this.tips = '交易完成'
				this.$api.DLQgetOrders().then((res)=>{
					this.orderList = res.data.filter((item)=>item.accomplish == 0)
				})
			},
			tabs3(){
				this.tabs = 3
				this.btntext = '订单评价'
				this.tips = '未评价'
				this.$api.DLQgetOrders().then((res)=>{
					this.orderList = res.data.filter((item)=>item.undiscuss == 0)
				})
			},
			tabs4(){
				this.tabs = 4
				this.btntext = '查看详情'
				this.tips = '已交易/未交易'
				this.$api.DLQgetOrders().then((res)=>{
					this.orderList = res.data.filter((item)=>item.apply == 1)
				})
			},
		}
		
	}
</script>

<style lang='scss' scoped>
	.nav{
		ul{
			display: flex;
			list-style: none;
			padding: 0;
			li{
				width: 25%;
				text-align: center;
			}
			.li-active{
				color: #2ED8C4;
				border-bottom: 4upx solid #2ED8C4;
				height: 60upx;
			}
		}
	}
	.order-demo{
		margin: 40upx;
		border-radius: 20upx;
		box-shadow: 0px 0px 12upx 4upx #eee;
		padding: 20upx 30upx 20upx 50upx;
		.order-top{
			display: flex;
			justify-content: space-between;
			margin-bottom: 40upx;
			.order-top-left{
				display: flex;
				span{
					margin: 0 20upx;
					font-size: 24upx;
				}
			}
			.order-top-right{
				font-size: 26upx;
				color: #2ED8C4;
			}
		}
		.order-content{
			display: flex;
			justify-content: space-between;
			margin-bottom: 40upx;
			.order-img{
				width: 200upx;
				height: 200upx;
				border-radius: 20upx;
			}
			.order-content-right{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-end;
				margin-left: 40upx;
				p{
					font-size: 24upx;
					display: flex;
				}
				.goods{
					margin-right: 40upx;
				}
				.sure{
					display: flex;
					.mr30{
						margin-right: 30upx;
					}
				}
			}
		}
	}
</style>